<template>
    <div>
      <div class="app_wrap">
        <div class="approval_left">
            <div class="app_mes">
               <h1>申请人信息</h1>
               <div>
                 <h2>姓名:{{appDetas.username}}</h2>
                 <div class="pro_info">
                    <h3>部门：{{appDetas.departmentName}}</h3><h3>入职时间：{{appDetas.timeOfEntry}}</h3>
                 </div>
               </div>
            </div>
            <!-- 离职 -->
            <div class="app_cate" v-if="procData.processName=='离职'">
              <h1>{{appDetas.processName}}申请</h1>
               <div>
                 <h2>申请类型:{{procData.processName}}</h2>
                 <div class="pro_info">
                    <h3>{{procData.processName}}原因：{{procData.reason}}</h3><h3>期望的离职时间：</h3>
                 </div>
               </div>
            </div>
            <!-- 请假 -->
           <div class="app_cate" v-if="procData.processName=='请假'">
              <h1>{{appDetas.processName}}申请</h1>
               <div>
                 <h2>申请类型:{{procData.processName}}</h2>
                 <div class="pro_info">
                    <h3>{{procData.processName}}原因：{{procData.reason}}</h3>
                 </div>
                 <div class="pro_info">
                    <h3>请假时长：{{procData.reason}}</h3><h3>开始时间：</h3>
                 </div>
                   <div class="pro_info">
                    <h3>审批状态：{{procData.reason}}</h3><h3>结束时间：</h3>
                 </div>
               </div>
            </div>
            <!-- 加班 -->
            <div class="app_cate" v-if="procData.processName=='加班'"> 
              <h1>{{appDetas.processName}}申请</h1>
               <div>
                 <h2>申请类型:{{procData.processName}}</h2>
                 <div class="pro_info">
                    <h3>{{procData.processName}}原因：{{procData.reason}}</h3>
                 </div>
                  <div class="pro_info">
                    <h3>补偿方式：{{procData.reason}}</h3><h3>加班开始时间：</h3>
                 </div>
               </div>
            </div>
        </div>
         <div class="approval_right">
            <div>
              <h1>审批记录</h1>
              <div class="time_wrap">
                 <el-timeline>
                    <el-timeline-item
                      v-for="(activity, index) in processList"
                      :key="index"
                      :color="activity.color"
                      :timestamp="activity.handleTime">
                  
                        <div slot="dot">
                          <i class="el-icon-success" style="font-size:20px; margin-left: -5px; color:chartreuse;" ></i>
                        </div>

                         {{activity.handleUserName}}&nbsp;&nbsp;{{activity.handleOpinion}} 

                    </el-timeline-item>

                  </el-timeline>
              </div>
            </div>
         </div>
      </div>
    </div>
</template>
<script>
import {getApprovalDetail,getApprovalProcess} from '@/api/approval'
export default {
    data(){
      return {
        appDetas:[], //左侧的信息
        procData:{}, //具体申请信息 原因等
        processList:[],//审批流程
         activities: [{
          content: '支持使用图标',
          timestamp: '2018-04-12 20:46',
          size: 'large',
          type: 'primary',
          icon: 'el-icon-success'
        }, {
          content: '支持自定义颜色',
          timestamp: '2018-04-03 20:46',
          color: '#0bbd87',
           icon: 'el-icon-success'
        }, {
          content: '支持自定义尺寸',
          timestamp: '2018-04-03 20:46',
          size: 'large',
           icon: 'el-icon-success'
        }]
      }
    },
    created(){
      this.getapprovalDeta()
      this.getProcess();
    },
    methods:{
     async  getapprovalDeta(){ //获取审批详情
          let res=await getApprovalDetail(this.$route.params.approvalId);
        console.log(res,"99999995656565699999999")
        this.appDetas=res.data;
        this.procData=JSON.parse(res.data.procData)
        console.log(this.procData,"--------------------")
      },
      async getProcess(){
         let res=await getApprovalProcess(this.$route.params.approvalId)
         console.log(res,"-------时间线-----")
         this.processList=res.data;
      }
    }
}
</script>
<style lang="scss">
    .app_wrap{
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 0 40px;
      box-sizing: border-box;
      .approval_left{
        flex:1;
      }
      .approval_right{
        width: 440px;
        margin: 0 20px;
      }
      .app_mes{
        margin-top: 30px;
        h1{
          margin-bottom: 10px;
        }

      }
      .app_cate{
          margin-top: 30px;
           h1{
          margin-bottom: 10px;
        }
      }
      .pro_info{
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
        padding: 0 40px ;
        box-sizing: border-box;
      }
    }
    .time_wrap{
      margin-top: 50px;
      margin-left: 20px;
    }
</style>